import TipDesc from '@/components/tipDesc/tipDesc';

export const Label = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => {
  return <span className={className}>{children}</span>;
};

export const RequiredLabel = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => {
  return (
    <span className={className}>
      {children}
      <span className="ml-1 text-error">*</span>
    </span>
  );
};

export const PrefixStyleLabel = ({ className }: { className?: string }) => {
  return <div className={`mr-2 h-3.5 w-[3px] bg-[var(--brand-color)] ${className || ''}`} />;
};

export const CustomFormLabel = ({
  /** 前缀 */
  prefix = false,
  /** 是否必填 */
  required = false,
  /** 描述 */
  description,
  /** 标签内容 */
  children,
  /** 自定义类名 */
  className,
  /** 标签拓展类名 */
  labelClassName,
}: {
  /** 标签内容 */
  children: React.ReactNode;
  /** 前缀 */
  prefix?: boolean;
  /** 是否必填 */
  required?: boolean;
  /** 描述 */
  description?: string;
  /** 自定义类名 */
  className?: string;
  /** 标签拓展类名 */
  labelClassName?: string;
}) => {
  return (
    <div className={className}>
      <div className="flex items-center">
        {prefix && <PrefixStyleLabel />}
        {required ? (
          <RequiredLabel
            className={`text-[14px] font-semibold leading-[22px] text-text-4 ${
              labelClassName || ''
            }`}
          >
            {children}
          </RequiredLabel>
        ) : (
          <Label
            className={`text-[14px] font-semibold leading-[22px] text-text-4 ${
              labelClassName || ''
            }`}
          >
            {children}
          </Label>
        )}
      </div>
      {description && <TipDesc title={description} />}
    </div>
  );
};
